<template>
  <div class="chat_login">
    <div class="btn" @click="exit">
      <el-button type="primary" icon="el-icon-s-home" circle></el-button>
    </div>
    <div class="bg">
      <img src="https://pic.rmb.bdstatic.com/bjh/f30968641a6433f315533c027f345baa.jpeg" alt />
    </div>
    <div class="login">
      <div class="title">登陆</div>
      <el-input placeholder="用户名(2-5个字符)" v-model="userName"></el-input>
      <div class="ava_title">选择头像 ：</div>
      <div class="avatars_box">
        <div v-for="item in 8" :key="item">
          <img
            @click="selectIndex = item"
            :class="selectIndex == item ? 'active' : ''"
            :src="'/images/' + item + '.png'"
            alt
          />
        </div>
      </div>
      <div class="btnbox">
        <div class="btn" @click="submit">登陆</div>
      </div>
      <div class="attention">
        <div class="att_title">用户须知</div>
        <div class="att_content">
          <span>1：网站暂时不支持图片信息发送</span>
          <span>2：暂不开放用户之间私聊，仅开放用户与博主之间私聊</span>
          <span>3：请用户自觉遵守相关法律法规</span>
          <span>4：不得利用本站传播不良信息</span>
          <span>5：用户若有违规行为，本站将删除违法内容、目录，断开链接，注销其用户帐号</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../api/request'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      images: 9,
      currentIndex: 0,
      src: '/images/1.png',
      userName: '',
      password: '',
      isLogin: true,
      selectIndex: 1
    }
  },
  computed: {
    ...mapGetters(['getAdmin', 'getToken', 'getUser'])
  },
  watch: {
    getToken: function (newVal, oldVal) {
      if (newVal) {
        this.$store.dispatch('SOCKET_USER_INFO') // socket连接
        setTimeout(() => {
          this.$router.push('/chatroom')
        }, 500)
      }
    }
  },
  methods: {
    // 返回首页
    exit() {
      this.$router.push('/')
    },
    async submit() {
      if (!this.userName) {
        this.$notify({
          title: '警告',
          message: '用户名不能为空',
          type: 'warning'
        })
        return
      }
      if (this.userName.length < 2 || this.userName.length > 5) {
        this.$notify({
          title: '警告',
          message: '用户名长度错误',
          type: 'warning'
        })
        return
      }

      this.$store.dispatch('silentRegistered', {
        userName: this.userName,
        photo: '/images/' + this.selectIndex + '.png'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/common.scss';
@import './chatLogin.scss';
</style>
